================================================================================
  REM
  Cold steel, one hot accent: a coherent multi-page HTML template.
  By Luko Karavan · https://www.lukokaravan.com/digiluko
================================================================================

  (To reuse this README for another template, only the template name "Rem" and the page list need changing - the rest applies to every template.)


WHAT THIS IS
--------------------------------------------------------------------------------
Not a single page - a small design SYSTEM applied across page types, so the whole site feels like one hand made it. Plain HTML, CSS and JavaScript: no build step, no framework, no npm. Open a file in a browser and it works.

The entire look is driven by CSS custom properties ("tokens"). Change a handful of variables and the whole template re-skins - colours, metal, spacing, type, all of it. A ready-made dark ("midnight steel") and light ("cold marble") variant ship together.

Rem is drawn from a real place in a real text: the frozen city in "The First Mechan", a short story from Luko Karavan's Antihistor cycle - in English at https://antihistor.substack.com/p/the-first-mechan


WHAT'S INCLUDED
--------------------------------------------------------------------------------
  index.html             Landing / homepage (runtime dark-light switch, so no -light twin).
  generic.html           The kitchen sink: every element and component in one place.
  blog.html              Blog index: ledger cover, featured entry, filter, grid, archive.
  blogpost.html          One entry: reading bar, contents rail, share rail, gallery, code, discussion.
  portfolio.html         Pattern-book portfolio: register, case file, masonry of plates, gauges.
  shop.html              Optional commerce set: catalogue with filter + real sort, live mini-cart drawer.
  product.html           One product: gallery, variants, quantity, reviews, sticky add bar.
  cart.html              Full cart: quantities, save for later, free-delivery gauge, summary.
  legal.html             One reusable legal document (terms, privacy, cookies, imprint...).
  404.html               A lean error page.
                         Every page except index.html has a -light twin (e.g. blog-light.html). The shop trio is optional - delete the three pages and css/shop|product|cart.css if you do not sell anything.
  css/
    tokens.css           Design tokens - DARK theme  (the re-skin layer).
    tokens-light.css     Design tokens - LIGHT theme (same variable names).
    base.css             Reset, fonts, typography, rich-text elements.
    layout.css           Page skeleton: header / nav / main / footer, decor.
    components.css       Reusable UI: plates, the ring, buttons, callouts, cards, gallery, forms...
    landing.css          index.html only.
    blog.css             blog.html + blogpost.html.
    portfolio.css        portfolio.html.
    shop.css             shop.html + product.html + cart.html (e-shop chrome, product card).
    product.css          product.html.
    cart.css             cart.html.
    legal.css            legal.html.
    print.css            PORTABLE: paper/PDF adapter (linked media="print" on every page).
    code.css             PORTABLE: syntax-highlight theme (Prism / highlight.js).
    epub.css             PORTABLE: EPUB stylesheet (pandoc ... --css css/epub.css).
  themes/
    rem.marp.css         PORTABLE: Marp / reveal slide theme.
  tokens/
    rem.tokens.json      PORTABLE: design tokens in DTCG format (Figma / Style Dictionary), generated from the CSS tokens.
  js/
    main.js              All interactivity (vanilla JS, numbered independent blocks).
  assets/
    img/scenes/          Sample images (webp) - the drawn scenes of Rem, rendered.
    img/cover/           The template cover.
    img/mockups/         Previews of the specimen documents (used on the landing).
    icons/fav/           Favicons, web app manifest, social share image.
    samples/             Specimen docs (PPTX / XLSX / DOCX / PDF / EPUB, dark & light).
  README.txt, LICENSE.txt, STYLE-GUIDE.md, humans.txt

  PORTABLE IDENTITY: the same tokens drive more than the web. Each "PORTABLE" file above is a thin adapter for another surface (print, slides, EPUB, code, Figma). Bring your own tool - no converter ships in this package.

  "generic.html" is the kitchen-sink page: it shows every element and component in one place - the best starting point to see what's available. STYLE-GUIDE.md is the short design brief: palette, type, rivets, glow, and what not to do.


QUICK START
--------------------------------------------------------------------------------
  1. Open generic.html in a browser to explore everything on offer.
  2. Copy a page, swap in your own text and images, and you're building.
  3. Light theme: in the page's <head>, change the stylesheet link css/tokens.css -> css/tokens-light.css. That single swap is the ONLY difference between dark and light; base.css, layout.css and components.css are shared and theme-agnostic. (index.html carries both palettes and switches at runtime.)


MAKING IT YOURS
--------------------------------------------------------------------------------
  • Colours / metal / spacing / fonts / radii:  edit css/tokens.css (and the light mirror). You rarely need to touch the other CSS files.
  • Fonts are loaded from Google Fonts (a <link> in each page's <head>): Cinzel, Spectral, Barlow Condensed, IBM Plex Mono. Swap the families there and update --font-* in the tokens.
  • Images are .webp inside a drawn "scene" frame: drop your own picture into the same <img>, and if a file is ever missing the drawn panel shows through instead of a broken icon. Update the favicons in assets/icons/fav/ too.
  • The canonical links are relative (and index.html points at the template's page on the author's site): set your own URLs when you publish.
  • Each CSS/JS file opens with a table of contents and clearly-marked sections; interactive parts note which JavaScript block drives them.


BROWSER SUPPORT
--------------------------------------------------------------------------------
Modern evergreen browsers (Chrome, Edge, Firefox, Safari). Uses current CSS (custom properties, clamp(), color-mix(), conic gradients and masks). No Internet Explorer support. Everything respects prefers-reduced-motion.


CREDIT
--------------------------------------------------------------------------------
Free to use, including commercially. The only ask: keep a visible credit link in your footer -

  Design: Rem by Luko Karavan - https://www.lukokaravan.com/digiluko

See LICENSE.txt for the full terms (and notes on sample content and the third-party fonts / Fancybox lightbox).


--------------------------------------------------------------------------------
  Made by Luko Karavan - https://www.lukokaravan.com/digiluko
  More templates and tools: DigiLuko. The story behind Rem: https://antihistor.substack.com
--------------------------------------------------------------------------------
